<template>
  <div class="player" :style="themeStyle">
    <div class="player-icon" v-if="!playState" @click="changePlay">
      <IconFont iconType="icon-bofang" :style="style" />
    </div>

    <div class="player-icon" v-if="playState" @click="changePlay">
      <IconFont iconType="icon-zanting" :style="style" />
    </div>
    <Select
      :disabled="playState"
      class="player-select"
      v-model:value="speedSelectedValue"
      :options="options"
      @change="changeSpeed"
      :getPopupContainer="(triggerNode) => {
          return triggerNode.parentNode;}" />
    <Slider
      class="player-slider"
      :marks="marks"
      :step="1"
      :max="maxTime"
      :min="0"
      v-model:value="progressValue"
      :disabled="true"
      :tip-formatter="formatter"
      :tooltip-visible="true"
      :getTooltipPopupContainer="
        (triggerNode) => {
          return triggerNode.parentNode;
        }
      "
    />
  </div>
</template>

<script lang="ts" setup>
  import { Select, Slider } from 'ant-design-vue';
  import { ref, defineEmits, watch } from 'vue';
  import { markArrToMark } from '@/utils/weather/imagePlayer.js';
  import IconFont from '@/components/IconFont';
  import { activeColor, themeStyle } from '../constants';

  let style = { color: activeColor, fontSize: '28px' };

  const emit = defineEmits(['handlePlay', 'update:maxTime', 'update:progressValue']);
  // eslint-disable-line
  const props = defineProps(['maxTime', 'progressValue', 'marksArr']);

  let maxTime = ref(props.maxTime);
  let progressValue = ref<number>(props.progressValue || 0);
  const marks = ref<any>(markArrToMark(props.marksArr));

  let options = [
    { label: '快速', value: 3 },
    { label: '慢速', value: 5 },
  ];
  let speedSelectedValue = ref(options[0].value);
  let startPlay = ref<any>(null); //定时器存储值
  let playState = ref(false); //播放状态
  var times = ref(0);

  const clearInter = () => {
    clearInterval(startPlay?.value);
    startPlay.value = null;
    playState.value = false;
  };
  const changePlay = () => {
    playState.value = !playState.value;
    if (playState.value) {
      changeProgress();
    } else {
      clearInter();
    }
  };

  const changeProgress = () => {
    startPlay.value = setInterval(() => {
      if (times.value === maxTime.value) {
        clearInter();
        times.value = 0;
        return;
      }
      times.value++;
      progressValue.value = times.value;
      emit('handlePlay', times);
      if (times.value == props.marksArr.length) {
        clearInter();
        return;
      }
    }, speedSelectedValue.value * 200);
  };

  //
  const changeSpeed = (v) => {
    speedSelectedValue.value = v;
    clearInter();
  };

  const formatter = (value: number) => {
    return `${props?.marksArr?.[value]}`;
  };

  watch(props, (val) => {
    maxTime.value = val.maxTime;
    progressValue.value = val.progressValue;
    marks.value = markArrToMark(val.marksArr?.map((v) => v?.slice(5, 20)?.slice(0, 11)));
    if (val.progressValue == 0) {
      times.value = 0;
    }
  });
</script>

<style lang="less" scoped>
  .player {
    position: fixed;
    bottom: 0;
    width: -webkit-fill-available;
    height: 56px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0px -2px 24px 0px rgba(160, 165, 186, 0.08);
    border-radius: 8px;
    margin: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;

    .player-icon {
      cursor: pointer;
      width: 32px;
      height: 32px;
      margin-right: 16px;
      display: flex;
      align-items: center;
    }

    .player-select {
      // min-width: 72px;
      height: 32px;
      border-radius: 4px;
      border: 1px solid #e5e6ed;
    }

    .player-slider {
      width: 100%;
      margin: 0 16px;
    }
  }
</style>
